<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="/books/css/dl.css" />
    <script src="/books/js/jquery-3.5.1.min.js">



    </script>
</head>

<body class="视频">
<!--	导入js文件-->
<script src="/books/js/a1.js">



</script>

<script type="text/javascript">
    $(function () {

        $("#name").blur(function () {
            if ($("#name").val() == "")
            {
                return;
            }
            var zhanghao = $("#name").val();

                $.ajax({

                    contentType:"text",
                    data:{username:zhanghao},
                    dataType:"text",
                    error:function(){
                        alert("错误");
                    },
                    success:function (zfc) {

                        $("#yzname").text(zfc)

                    },
                    url:"AjaxVerification",
                    type:"get"
                })
        })

        $("#name").focus(function () {

            $("#yzname").text("")

        })


        $("#qrpassword").blur(function () {

           var password = $("#password").val();
           var rqpassword = $("#qrpassword").val();

           if (password != "" && rqpassword != "")
           {
               if (rqpassword != password)
               {
                   $("#qrmm").text("密码有误，重新输入")
               }else
               {
                   $("#qrmm").text("密码一致")
               }
           }

        })

        $("#qrpassword").focus(function(){

            $("#qrmm").text("")

        })


        $("#email").blur(function () {

            var email = $("#email").val().trim();

            if (email == "")
            {
                return;
            }

            z = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

            if(!z.test(email))
            {
                $("#qremail").text("邮箱格式不正确");
            }else
            {
                $("#qremail").text("邮箱可用");
            }

        })

        $("#email").focus(function () {

            $("#qremail").text("");

        })

        $("#zc").click(function () {

            var yzname  = $("#yzname").text().trim();//获取span标签中的文本内容，这里一定要去掉前后空白，否则比较的时候就是false

            var qrmm  = $("#qrmm").text().trim();

            var qremail  = $("#qremail").text().trim();




            if ( yzname == "可注册" && qrmm == "密码一致" && qremail == "邮箱可用")
            {
                $.ajax({
                    contentType:"text",
                    data:{username:$("#name").val().trim(), userpassword:$("#password").val().trim() , email: $("#email").val().trim()},
                    url:"Register",
                    success:function (jiego){
                        $("#zc").text(jiego)
                    },
                    dataType: "text",
                    type:"post"
                })

            }else
            {
                $("#zc").text("完善信息")
                return;

            }

        })


    })
</script>




<!--注册界面	-->
<div id="mySidenav" class="侧边注册界面">

    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">注册</a>

    <input class="注册" type="text" name="name" placeholder=" 账号：4到12位，不包括中文" id="name"/>
    <br>
    <span id="yzname" style="color: red"></span>
    <br>
    <input class="注册" type="password" name="password" placeholder=" 密码"  id="password" />
    <br>
    <input class="注册" type="password" name="qrpassword" placeholder="确认密码"  id="qrpassword" onfocus="do2()" onblur="do3()"/>
    <br>
    <span id="qrmm" style="color: red"></span>
    <br>
    <input class="注册" type="email" name="email" placeholder="电子邮箱"  id="email" onfocus="do4()" onblur="do5()"/>
    <br>
    <span id="qremail" style="color: red"></span>
    <br>
    <button class="侧边注册按钮"  id="zc">注册</button></span>



</div>



<div class="账户输入界面">
    <form action="logon" method="post">
        <input class="输入框" type="text" name="username" placeholder=" 账号"/>
        <br>
        <input class="输入框" type="password" name="userpassword" placeholder=" 密码"/>
        <br>

        <button th:if="${#strings.isEmpty(message)}" class="登录按钮" type="submit">登录</button></a>
        <button th:unless="${#strings.isEmpty(message)}" th:text="${message}" class="登录按钮" type="submit">登录</button></a>
        <br>
    </form>


</div>

<div class="注册界面">
    <img src="/books/图片/logo图标.png" width="100px"  alt=""/>
    <p>登录</p>
    <span  onclick="openNav()" ><button class="注册按钮"><a href="#" style="color: aliceblue">注册</a></button>	</span>

</div>

<div class="登录背景">

    <div class="登录背景1"></div>

</div>


</body>
</html>